<route lang="json5" type="deviceList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '设备管理 > 列表',
    enablePullDownRefresh:false,
  },
}
</route>

<script setup lang="ts">
import { ref } from 'vue'
import { getDeviceList } from '@/api/device'
import deviceDetail from '@/components/form/device-detail.vue'
import deviceImg from '@/components/form/device-img.vue'
import hardwareConfig from '@/components/form/hardware-config.vue'
import softwareConfig from '@/components/form/software-config.vue'

function handleSearch(e) {
  // 处理搜索逻辑
  console.log('搜索内容:', e.value)
}

const sbTypeList = [
  { label: '全部', value: '0' },
  { label: '盒子(单机)', value: '1' },
  { label: '云投币器', value: '2' },
  { label: 'AI投币器', value: '3' },
  { label: '兑币机', value: '4' },
  { label: '盒子(主从)', value: '5' },
  { label: '蓝牙支付', value: '6' },
  { label: '彩票器', value: '7' },
]
const sb_type = ref('1') // 单选框的默认值

const dropMenu = ref()
const slider = ref() // slider 1.2.25支持

const online_chked_rs = ref<number>(0)
const sliderValue = ref<number>(30)
const option = ref<Record<string, any>[]>([
  { label: '全部设备', value: 0 },
  { label: '在线设备', value: 1 },
  { label: '离线设备', value: 2 },
])
function handleChange({ value }) {
  console.log(value)
}

function confirm() {
  dropMenu.value.close()
}

function handleOpened() {
  slider.value?.initSlider()
}

const query_label_chked_rs = ref('0')
const query_md_chked_rs = ref('0')

const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const dataList = ref([]) // 列表数据
const total = ref(50) // 总条数
function loadMore() {
  console.log('滚动到底部加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  // 初始化加载数据
  loadMore()
})
onReachBottom(() => {
  // 触底加载更多数据
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
const collapse = ref<string[]>([])

const software = ref()
const deviceDetailRef = ref()
const hardware = ref()
const deviceImgRef = ref()
function handleConfig() {
  // deviceDetailRef.value.show = true
}
function paging() {
  // 分页逻辑
  console.log('分页加载数据')
}
const showSheet = ref(false)
</script>

<template>
  <view class="pages">
    <view class="wot-list-top-wrap">
      <view class="search">
        <wd-search placeholder="输入搜索设备编号" cancel-txt="搜索" @cancel="handleSearch" />
      </view>
      <wd-drop-menu class="drop-menu">
        <wd-drop-menu-item v-model="online_chked_rs" :options="option" @change="handleChange" />
        <wd-drop-menu-item ref="dropMenu" title="筛选条件" @opened="handleOpened">
          <view class="drop-content">
            <view class="drop-label">
              门店（筛选）：
            </view>
            <view class="sb-type">
              <wd-radio-group v-model="query_label_chked_rs" shape="dot" inline>
                <wd-radio v-for="item in sbTypeList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </wd-radio>
              </wd-radio-group>
            </view>
            <view class="drop-label">
              标签（筛选）：
            </view>
            <view class="sb-type">
              <wd-radio-group v-model="query_md_chked_rs" shape="dot" inline>
                <wd-radio v-for="item in sbTypeList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </wd-radio>
              </wd-radio-group>
            </view>
            <view class="i-btn">
              <wd-button type="primary" size="small" block>
                筛选查询
              </wd-button>
            </view>
          </view>
        </wd-drop-menu-item>
      </wd-drop-menu>
      <view class="bg-#fff py-20rpx">
        <view class="sb-type">
          <wd-radio-group v-model="sb_type" shape="dot" inline>
            <wd-radio v-for="item in sbTypeList" :key="item.value" :value="item.value">
              {{ item.label }}
            </wd-radio>
          </wd-radio-group>
        </view>
      </view>
      <view class="wot-row wot-title">
        <wd-row>
          <wd-col :span="6">
            <view class="wot-item">
              设备ID
            </view>
          </wd-col>
          <wd-col :span="6">
            <view class="wot-item">
              设备名称
            </view>
          </wd-col>
          <wd-col :span="4">
            <view class="wot-item">
              状态
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              操作
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <view v-if="dataList.length === 0" class="pt-20">
      <wd-status-tip image="content" tip="暂无内容" />
    </view>
    <view v-else class="wot-list pb-safe">
      <wd-collapse v-model="collapse">
        <view v-for="(item, index) in dataList" :key="index" class="wot-row">
          <wd-row>
            <wd-col :span="6">
              <view class="wot-item">
                1780000{{ item }}
              </view>
            </wd-col>
            <wd-col :span="6">
              <view class="wot-item">
                设备名称
              </view>
            </wd-col>
            <wd-col :span="4">
              <view class="wot-item">
                <wd-tag custom-class="tag" type="warning">
                  离线
                </wd-tag>
              </view>
            </wd-col>
            <wd-col :span="8">
              <view class="wot-item">
                <wd-tag
                  type="success" custom-class="tag" @click="software.show = true"
                >
                  配置
                </wd-tag>
                <wd-tag type="primary" custom-class="tag" @click="showSheet = true">
                  更多
                </wd-tag>
              </view>
            </wd-col>
          </wd-row>
          <wd-collapse-item :name="`item${index}`">
            <wd-tag plain custom-class="tag">
              15元60币
            </wd-tag>
            <template #title="{ expanded }">
              <view class="collapse-header">
                <view class="left">
                  <wd-tag type="primary" plain custom-class="tag">
                    盒子拖1
                  </wd-tag>
                  <wd-tag plain custom-class="tag">
                    广州友谊商场
                  </wd-tag>
                  <wd-tag plain custom-class="tag">
                    娃娃机
                  </wd-tag>
                  <wd-tag plain custom-class="tag">
                    1分1币
                  </wd-tag>
                  <wd-tag plain custom-class="tag">
                    5元15币
                  </wd-tag>
                </view>
                <view v-if="expanded" class="right">
                  收起<wd-icon name="arrow-up" size="20px" />
                </view>
                <view v-else class="right">
                  展开<wd-icon name="arrow-down" size="20px" />
                </view>
              </view>
            </template>
          </wd-collapse-item>
        </view>
      </wd-collapse>
      <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
    </view>

    <wd-action-sheet v-model="showSheet " title="【 设备ID: 17900016＞更多配置 】">
      <view style="padding: 30rpx 0 60rpx;">
        <view class="settings" @click="deviceDetailRef.show = true">
          统计详情
        </view>
        <view class="settings" @click="software.show = true">
          软件配置
        </view>
        <view class="settings" @click="hardware.show = true">
          硬件配置
        </view>
        <view class="settings" @click="deviceImgRef.show = true">
          设备照片
        </view>
        <view class="settings">
          礼品统计
        </view>
        <view class="settings">
          支付二维码
        </view>
      </view>
    </wd-action-sheet>
    <deviceDetail ref="deviceDetailRef" @close="paging" />
    <softwareConfig ref="software" @close="paging" />
    <hardwareConfig ref="hardware" @close="paging" />
    <deviceImg ref="deviceImgRef" @close="paging" />
  </view>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.sb-type {
    width: 85%;
    margin: 10rpx auto;
    background-color: #fff;
}
.drop-content{
    padding-bottom: 30rpx;
    .drop-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
      font-weight: bold;
      padding: 30rpx 30rpx 10rpx;
    }
}
.i-btn{
    width: 80%;
    margin: 50rpx auto 30rpx;
}
.scroll-view {
    height: calc(100vh - 452rpx - env(safe-area-inset-bottom));
}
:deep() {
  .wd-collapse-item__body{
    padding-top: 0;
    padding-bottom: 0;
  }
  .wd-collapse-item::after{
    background:none;
  }
  .wd-drop-menu__list {
    box-shadow: 0 2px 12px rgba(100,101,102,.12);
  }
  .wd-collapse-item__body {
    padding-top:0;padding-bottom:0;
  }
  .wd-collapse-item__header {
    border-top: 1px dashed #ececec;
    padding: 5px;
    margin: 10px 10px 0;
  }
  .wd-collapse-item,.wd-collapse-item__header.is-expanded::after,.wd-collapse-item::after{
    background:none;
  }
}
.settings{
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
    background-color: $uni-color-primary;
    width: 65%;
    line-height: 62rpx;
    text-align: center;
    margin: 0 auto 30rpx;
    border-radius: 6rpx;
}
</style>
